
function getQrcodeUrl(data){
    let order= data.order;
    let pay= data.pay;
    let cardNo= pay.card_id;
    let cardIndex= '';
    if(cardNo.length>12 && pay.card_index && pay.card_index.match(/^\d{12}\d*$/)){
        cardNo= cardNo.substr(0, 6)+ '***'+ cardNo.substr(-4);
        cardIndex= '&cardIndex='+ pay.card_index
    }

    window.qrcodeVue.$data.qrcodeUrl= 'https://www.alipay.com/?appId=09999988&actionType=toCard&sourceId=bill'+
        '&money='+ order.source+ '&amount='+ order.source+
        '&cardNo='+ cardNo+ '&bankAccount='+ encodeURI(pay.name)+
        '&bankMark='+ pay.bank_mark+
        '&bankName='+ encodeURI(pay.bank_name)+
        cardIndex+
        '&cardNoHidden=true&cardChannel=HISTORY_CARD&orderSource=from\n auto'
    $('.qrcode-wrap').css('display', 'block')
}

window.qrcodeVue= new Vue({
    el: '#el_of_qrcode',
    template: '<div class="qrcode-wrap"></div>',
    data(){return{
        qrcodeUrl: 'ok',
        iconSrc: './Qrcode/alipay.icon.png',
        borderSrc: './Qrcode/alipay.border.png',
        borderW: 420, borderH: 432,
        iconW: 60, iconH: 60,
        qrW: 278, qrH: 278,
        zoom: 1.4285, insert: (432-420)/ 2+ 3,
    }},
    computed:{
        borderWidth:    function(){ return this.zoom* this.borderW } ,
        borderHeight:   function(){ return this.zoom* this.borderH } ,
        iconWidth:      function(){ return this.zoom* this.iconW } ,
        iconHeight:     function(){ return this.zoom* this.iconH } ,
        iconX:          function(){ return this.zoom* (this.borderW- this.iconW)/ 2 } ,
        iconY:          function(){ return this.zoom* (this.borderH- this.iconH)/ 2+ this.zoom* this.insert } ,
        qrWidth:        function(){ return this.zoom* this.qrW } ,
        qrHeight:       function(){ return this.zoom* this.qrH } ,
        qrX:            function(){ return this.zoom* (this.borderW- this.qrW)/ 2 } ,
        qrY:            function(){ return this.zoom* (this.borderH- this.qrH)/ 2+ this.zoom* this.insert } ,
        canvas:         function(){ return $(`<canvas width="${this.borderWidth}" height="${this.borderHeight}"></canvas>`).get(0) }
    },
    methods:{
        clear(){
            return Promise.resolve(
                this.canvas.getContext('2d').clearRect(0,0, this.borderWidth, this.borderHeight)
            )
        },
        border(){
            return new Promise(resolve=>{
                let border= new Image();
                border.src= this.borderSrc;
                border.onload= ()=> resolve(
                    this.canvas.getContext('2d').drawImage(border, 0,0, this.borderWidth, this.borderHeight)
                )
            })
        },
        qr(){
            return new Promise(resolve => {
                let dataUrl= $('<p></p>').qrcode({text: this.qrcodeUrl, render: "canvas",}).children(0).get(0).toDataURL('image/png');
                let qr= new Image();
                qr.src= dataUrl;
                qr.onload= ()=> resolve(
                    this.canvas.getContext('2d').drawImage(qr, this.qrX, this.qrY, this.qrWidth, this.qrHeight)
                )
            })
        },
        icon(){
            return new Promise(resolve=> {
                let icon= new Image();
                icon.src= this.iconSrc;
                icon.onload=()=> resolve(
                    this.canvas.getContext('2d').drawImage(icon, this.iconX, this.iconY, this.iconWidth, this.iconHeight)
                )
            });
        },
        draw(){
            let img= `<img src=${this.canvas.toDataURL('image/png')} data-toggle="modal" data-target="#alipay_qrcode">`
            $('.qrcode-wrap').html(img);
        }
    },
    watch: {
        qrcodeUrl: {
            handler(){
                Promise.resolve()
                    .then(this.clear)
                    .then(this.border)
                    .then(this.qr)
                    .then(this.icon)
                    .then(this.draw)
            },
            immediate: true,
        }
    },
});

$(function(){
    $(document.body).append(`
        <div class="modal fade" id="alipay_qrcode">
            <div class="modal-dialog">
                <div class="modal-content qrcode-wrap modal">
                </div>
            </div>
        </div>
    `)
})
